<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view class="" slot="top">
        <u-navbar height="50" title="积分商城" title-size="36" title-color="#333"></u-navbar>
        <view class="content-tip"> 积分兑换区 </view>
      </view>
      <view class="goods_area">
        <view @click="routeTo" class="goods_box" v-for="(item, index) in dataList" :key="index">
          <!-- <image src="../../static/gui.png" mode=""></image> -->
          <view style="padding: 15rpx">
            <view class="goods_title"> 商品名称商品名称 </view>
            <view class="goods_price">
              <text class="price_main">2600积分</text>
              <button class="dh-btn">兑换</button>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stpe: 3,
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '拼团中'
        },
        {
          name: '拼团成功'
        },
        {
          name: '已失效'
        }
      ],
      dataList: [
        {
          status: 0
        },
        {
          status: 1
        },
        {
          status: 2
        },
        {
          status: 3
        }
      ]
    }
  },
  onLoad() {
    // this.$nextTick(function() {
    // 	this.onOrderLoad(this.current, null, true);
    // });
  },
  methods: {
    queryList(page, pageSize) {
      this.initData(page, pageSize, '')
    },

    initData(page, pageSize, status) {
      let self = this
      self.onOrderLoad(self.current, this.itemList, false)
    },
    onOrderLoad(current, orderList, loading) {
      if (loading) {
        this.$u.api.getOrderGroup({ filter_status: 1 }).then((res) => {
          console.log(res)
        })
        this.$refs.paging.reload()
      } else {
        this.$refs.paging.complete(this.dataList)
      }
    },
    onOrderDetail(item) {
      this.$utils.route({
        url: '/goods/group-order-details/group-order-details',
        params: {
          id: item.id
        }
      })
    },
    onShare() {},
    routeTo() {
      uni.navigateTo({
        url: '/goods/pre-goods-details/pre-goods-details'
      })
    }
  }
}
</script>

<style>
page {
  background: #eeeeef;
}

.content-tip {
  font-size: 35rpx;
  font-weight: 700;
  margin: 20rpx;
}

.goods_area {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.goods_box {
  width: 350rpx;
  display: flex;
  flex-direction: column;
  border-radius: 10rpx;
  background-color: #ffffff;
  margin-left: 15rpx;
  margin-bottom: 20rpx;
}
.goods_box image {
  width: 350rpx;
  height: 350rpx;
}
.goods_title {
  font-size: 35rpx;
  margin-top: 10rpx 0;
}
.goods_price {
  font-size: 25rpx;
  color: red;
  display: flex;
  margin: 20rpx 0;
}

.price_main {
  font-size: 38rpx;
}
.dh-btn {
  float: right;
  font-size: 26rpx;
  border: 2rpx solid #0f76bc;
  height: 55rpx;
  line-height: 55rpx;
  border-radius: 35rpx;
  color: #0f76bc;
}
</style>
